<html>
    
    <head>
        <meta charset="utf-8">
        <title>Mac Dock</title>
        <style>
            
            .dock {
                width: 300px;
                height: 50px;
                margin: 0px auto;
                padding: 10px;
                background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(0.75, #aaa), to(#000));
                background: -moz-linear-gradient(top, #000, #aaa);
                
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: box;
                
                -webkit-transition: 1s;
                -moz-transition: 1s;
                -o-transition: 1s;
                transition: 1s;
            }
            
            div.dock:hover {
                width: 375px;
            }
            
            .dock .dock-item .icon {
                width:50px;
                height:50px;
                
                -webkit-box-reflect:below 1px
                    -webkit-gradient(linear, left top, left bottom,
                        from(rgba(0, 0, 0, 0)),
                        color-stop(0.6, rgba(0, 0, 0, 0)),
                        to(rgba(0, 0, 0, 0.8))
                        );
                
                -webkit-transition: 1s;
                -moz-transition: 1s;
                -o-transition: 1s;
                transition: 1s;
            }
            
            .dock .dock-item:hover .icon {
                width: 100px;
                height: 100px;
                /*
                -webkit-transform: scale(2.0, 2.0);
                -moz-transform: scale(2.0, 2.0);
                -o-transform: scale(2.0, 2.0);
                transform: scale(2.0, 2.0);
                */
            }
            
            .dock .dock-item:hover+.dock-item .icon {
                width: 75px;
                height: 75px;
            }
            
            .dock-div {
                margin:50px;
            }
            
        </style>
    </head>
    
    <body>
        
        <h1>Mac Dock</h1>
        
        <div class="dock">
            <div class="dock-item">
                <a href="http://tmlife.net/feed"><img class="icon" src="img/RSS.png" /></a>
            </div>
            <div class="dock-item">
                <a href="http://twitter.com/#!/phi_jp"><img class="icon" src="img/Twitter.png" /></a>
            </div>
            <div class="dock-item">
                <a href="http://tmlife.net/"><img class="icon" src="img/Facebook.png" /></a>
            </div>
            <div class="dock-item">
                <a href="http://tmlife.net/"><img class="icon" src="img/StumbleUpon.png" /></a>
            </div>
            <div class="dock-item">
                <a href="http://tmlife.net/"><img class="icon" src="img/Delicious.png" /></a>
            </div>
            <div class="dock-item">
                <a href="http://tmlife.net/"><img class="icon" src="img/LinkedIn.png" /></a>
            </div>
        </div>
        
    </body>

</html>
